iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0

Jest-Dom 以及接下來的主角React-Testing-Library

在做測試時,我們需要針對特定的dom node去query來驗證dom是否有做改變以及是否符合我們所預期的結果.

toBeDisabled
toBeEnabled
toBeEmptyDOMElement
toBeInTheDocument
toBeInvalid
toBeRequired
toBeValid
toBeVisible
toContainElement
toContainHTML
toHaveAccessibleDescription
toHaveAccessibleName
toHaveAttribute
toHaveClass
toHaveFocus
toHaveFormValues
toHaveStyle
toHaveTextContent
toHaveValue
toHaveDisplayValue
toBeChecked
toBePartiallyChecked
toHaveErrorMessage

這是jest-dom所提供的一些matcher,當我們想要使用這些匹配器時

import '@testing-library/jest-dom/extend-expect'

在測試檔引入這段,就可以使用jest-dom所有的matcher


React-Testing-Library

接下來要寫貫徹RTL的一個function也就是render,這邊來寫一個render的原理,其實RTL裡面是包含了許多Dom Testing Library的函式

import { getQueruesForElememt } from '@testing-libraryt/dom';
import ReactDOM from 'react-dom';

const render = (comp) => {
	const container = document.createElement('div');
	ReactDOM.render(comp, container);
	const query = getQueruesForElememt(container);
	
	return { container, ...query }
}

透過getQueruesForElememt所以我們才可以使用眾多的func e.g.getByRole getByLabelText等

最後一個階段,我們來看一下如何看執行測試當下的track all of dom node

const { getSomething, debug } = render(<Comp />);

debug()

它就會印出所有的component內的節點,以供debug使用

https://ithelp.ithome.com.tw/upload/images/20210923/20120076WU8mqvnRGF.png


上一篇
Day 7 寫一下context
下一篇
Day 9 來了fireEvent
系列文
我不會測試,所以寫Jest與React Testing Library30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言